@bg-color: #d43c33;
@font-color: #fff;
@color-red: #d43c33;
@height:40px;
@font-size:14px;
@font-family: 'Avenir', Helvetica, Arial, sans-serif;

[v-cloak] {
  display: none;
}
img[lazy=error] {
  transition: all 0.5s;
}
img[lazy=loading] {
  transition: all 0.5s;
}
img[lazy=loaded] {
  transition: all 0.5s;
  width: 100%;
  height:100%;
  animation: fade 0.5s;
}

.dialog{
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  left:0;
  background-color:rgba(0,0,0,0.3);
  z-index:999;
  opacity:1;
}

@-webkit-keyframes fade {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes fade {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-active {
  opacity: 0;
}
.up-enter-active, .up-leave-active {
    transition: all .3s;
}
.up-enter, .up-leave-active {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.left-enter-active, .left-leave-active {
    transition: all .2s;
}
.left-enter, .left-leave-active {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
.right-enter-active, .right-leave-active {
    transition: all .2s;
}
.right-enter, .right-leave-active {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}
